<template>
  <div class="base-table">
    <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        :width="item.name === 'beginTime' || item.name === 'taskName' ? '210' : ''"
        :show-overflow-tooltip="true"
        v-for="(item, index) in options"
        :key="index"
        :prop="item.name"
        :label="item.displayname">
      </el-table-column>
      <el-table-column  :label="$t('public.operate')" width="130">
        <template scope="scope2">
          <el-button @click="details(scope2)" type="text" size="small">{{$t('intelligentQualityCheck.intelDetails')}}</el-button>
          <el-button type="text" v-show="callFlag" @click="listenVideo(scope2.row)" size="small" >{{$t('qualityCheck.ListenToTheRecording')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getCache} from '@/utils/m7Utils'
  export default {
    name: 'quailtyCheckResultTable',
    data () {
      return {
        multipleSelection: [] // 被选中的值
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      options: {
        type: Array,
        default: function () {
          return []
        }
      },
      callFlag: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    methods: {
      details (row) { // 详情
        this.$emit('details', row.row)
      },
      listenVideo (value) { // 听取录音
        let path = ''
        let self = this
        this.recordFileName(value.fileServer, value.recordFileName, function (url) {
          path = url
          self.$emit('listenVideo', {_id: value._id, path: path})
        })
      },
      handleSelectionChange (val) { // 多选点击事件
        this.multipleSelection = val
        this.$emit('handleSelectionChange', val)
      },
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      recordFileName (server, name, callBack) { // 读取路径
        if (!server) {
          callBack('')
          return
        }
        let fileList = name.split('/')
        let userPbx = fileList[1]
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          callBack(server + '/' + name)
        } else if (document.location.protocol === 'https:') {
          if (userPbx) {
            getCache('accountPbx', userPbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              callBack(server + '/' + name)
            })
          } else {
            callBack(server + '/' + name)
          }
        } else {
          callBack(server + '/' + name)
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
</style>
